<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* 其他事件 */
      /* div {
        width: 200px;
        height: 2000px;
        background-color: pink;
      } */

      /* 事件流 */
      .a {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
      .b {
        width: 100px;
        height: 100px;
        background-color: thistle;
      }
    </style>
  </head>
  <body>
    <!-- //事件分类 -->
    <!-- <button id="a" onclick="fn()">我是一个事件</button> -->

    <!-- 事件类型 -->
    <!-- <button id="a">点我aaaaaaaaaa</button>
  <input type="text" class="box"> -->

    <!-- 表单事件类型 -->
    <!-- <input type="text" id="a"> -->

    <!-- 其他事件 -->
    <!-- <div>123</div> -->

    <!-- 事件流and阻止冒泡 -->
    <!-- <div class="a">
      <div class="b"></div>
    </div> -->

    <!-- 阻止默认事件 -->
    <!-- <a href="####" class="stop">阻止默认事件</a> -->

    <!-- 事件委托 -->
    <!-- <ul>
      <li>0000001</li>
      <li>0000002</li>
      <li>0000003</li>
      <li>0000004</li>
      <li>0000005</li>
      <li>0000006</li>
      <li>0000007</li>
      <li>0000008</li>
      <li>0000009</li>
    </ul> -->

    <script>
      // 事件分类
      // HTML处理事件：在HTML代码中声明一个事件类型属性，该属性绑定到一个函数或者对象方法。
      // function fn() {
      //   console.log('事件')
      // }

      // DOM0级事件：获取节点对象，然后给这个节点对象添加事件类型属性，让这个属性去绑定一个函数或者对象方法。
      // 注意：如果这个属性多次绑定不同的函数或者对象方法，只有最后一个生效。
      // var a = document.getElementById('a')
      // a.onclick = function() {
      //   console.log('DOM0级事件')
      // }
      // a.onclick = function() {
      //   console.log('DOM0级事件 pro')
      // }
      // 移除DOM0级事件
      // a.onclick = null

      // DOM2级事件：
      // addEventListener(事件类型，回调函数)
      // 回调函数：开始不调，回头再调
      // DOM2级事件不会覆盖原有的事件，是叠加的，是增量的
      // var a = document.getElementById('a')
      // function fn() {
      //   console.log('DOM2级事件', e)
      // }
      // a.addEventListener('click', fn)
      // 移除DOM2级事件
      // 注意：removeEventListener第二个参数的回调函数要保证是同一个，所以通常使用一个第三方变量把函数缓存起来
      // a.removeEventListener('click', fn)

      //  事件类型
      // 鼠标事件类型
      // var a = document.querySelector('#a')
      // click 点击事件
      // a.addEventListener('click', function() {
      //   console.log('我被点击了')
      // })
      // mousemove 在绑定元素上移动就触发
      // a.addEventListener('mousemove', function() {
      //   console.log('mousemove')
      // })
      // mouseover 在绑定元素上经过就会触发，期间只会触发一次
      // a.addEventListener('mouseover', function() {
      //   console.log('mouseover')
      // })
      // mouseout 离开绑定元素上会触发一次
      // a.addEventListener('mouseout', function() {
      //   console.log('mouseout')
      // })
      // mouseenter 进入绑定元素上会触发一次
      // a.addEventListener('mouseenter', function() {
      //   console.log('mouseenter')
      // })
      // mouseleave 离开绑定元素上会触发一次
      // a.addEventListener('mouseleave', function() {
      //   console.log('mouseleave')
      // })
      // dblclick 双击绑定元素上会触发，同一时间只会触发一次
      // a.addEventListener('dblclick', function() {
      //   console.log('dblclick')
      // })
      // contextmenu 在绑定元素上使用鼠标右键会触发
      // a.addEventListener('contextmenu', function() {
      //   console.log('contextmenu')
      // })
      // wheel 在绑定元素上监听鼠标滚轮事件
      // a.addEventListener('wheel', function() {
      //   console.log('wheel')
      // })
      // 键盘事件：监听可获取焦点的元素，一般为表单元素
      // var box = document.querySelector('.box')
      // 键盘按下事件，按住会持续触发，有性能问题
      // box.addEventListener('keydown', function() {
      //   console.log('keydown')
      // })
      // 键盘按住事件，按住会持续触发，有性能问题
      // box.addEventListener('keypress', function() {
      //   console.log('keypress')
      // })
      // 监听键盘弹起事件
      // box.addEventListener('keyup', function() {
      //   console.log('keyup')
      // })

      // 表单事件类型
      // 表单元素的事件：
      // change事件：监听输入框内容改变事件，在输入框失焦的时候才触发
      // input事件：监听输入框内容改变事件，在键盘按下具体内容的时候触发，会重复执行，会有性能问题，谨慎使用
      // blur事件：监听输入框失焦事件
      // focus事件：监听输入框获取焦点事件
      // var a = document.querySelector('#a');
      //
      // 监听表单元素的点击事件，不建议在表单元素中事件
      // a.addEventListener('click', function() {
      //   console.log('点击事件')
      // })
      // 监听输入框内容改变事件，在输入框失焦的时候才触发
      // a.addEventListener('change', function() {
      //   console.log('输入框失焦事件')
      // })
      // 监听输入框内容改变事件，在键盘按下具体内容的时候触发，会重复执行，会有性能问题，谨慎使用
      // a.addEventListener('input', function() {
      //   console.log('输入框内容键盘按下具体内容改变事件')
      // })
      // 监听输入框失焦事件
      // a.addEventListener('blur', function() {
      //   console.log('输入框失焦事件')
      // })
      // 监听输入框获取焦点事件
      // a.addEventListener('focus', function() {
      //   console.log('输入框获取焦点事件')
      // })

      //其他事件
      // scroll监听用户的滚动行为(可以用来实现全屏滚翻/楼层跳转/左右联动)
      // document.addEventListener("scroll", function () {
      //   console.log("滚动事件");
      // });
      // onload DOM加载完毕的事件
      // window.onload=function(){
      //   console.log("DOM加载完毕的事件");
      // }
      // console.log("我已经执行好了");

      // 事件流
      // window.onload = function () {
      //   document.querySelector(".a").addEventListener("click", function () {
      //     console.log("外面的盒子");
      //   });
      // };
      // document.querySelector(".b").addEventListener("click", function () {
      //   console.log("里面的盒子");
      // });

      //  Event.currentTarget属性
      //   window.onload = function () {
      //   document.querySelector(".a").addEventListener("click", function (e) {
      //     console.log("外面的盒子",e.currentTarget);
      //   });
      // };
      // document.querySelector(".b").addEventListener("click", function (e) {
      //   console.log("里面的盒子",e.currentTarget);
      // });

      // Event.target属性
      // window.onload = function () {
      //   document.querySelector(".a").addEventListener("click", function (e) {
      //     console.log("外面的盒子",e.target);
      //   });
      // };
      // document.querySelector(".b").addEventListener("click", function (e) {
      //   console.log("里面的盒子",e.target);
      // });

      // Event.type属性
      // window.onload=function(){
      //   document.querySelector('.a').addEventListener('click',function(e){
      //     console.log('外面的盒子',e.type);
      //   })
      //   document.querySelector('.b').addEventListener('click',function(e){
      //     console.log('里面的盒子',e.type);
      //   })
      // }

      // 阻止默认事件
      // Event.preventDefault();方法
      // window.onload=function(){
      //   document.querySelector('.stop').addEventListener('click',function(e){
      //     e.preventDefault()
      //     console.log('阻止默认事件');
      //   })}

      // 阻止冒泡事件
      // Event.stopPropagation()方法
      // window.onload=function(){
      //   document.querySelector('.a').addEventListener('click',function(e){
      //     e.stopPropagation()
      //     console.log('外面的盒子');
      //   })
      //   document.querySelector('.b').addEventListener('click',function(e){
      //     e.stopPropagation()
      //     console.log('里面的盒子');
      //   })
      // }

      // 建议：无论任何时候一律使用事件委托
      // 事件委托
      // window.onload = function () {
      //   document.querySelector("ul").addEventListener("click", function (e) {
      //     if (e.target.nodeName.toUpperCase() === "LI") {
      //       console.log(e.target.textContent);
      //     }
      //   });
      // };
    </script>
  </body>
</html>
